<template>
	<div class="commentItem">
		<image :src="comment.member && comment.member.headimgurl"
			:class="['commenterAvatar',comment.pid!==0?'childAvatar':null]" />
		<div class="commentWrapItemCenter">
			<div>
				<text class="commenterName">{{
				  comment.member && comment.member.user_name
				}}</text>
			</div>
			
			<div>
				<text v-if="comment.pid==0" class="commenterContent">{{ comment.content }}</text>
				<text v-if="comment.pid!==0" class="commenterContentChild">{{ comment.content }}</text>
			</div>

			<div class="flexWrap">
				<text class="commenterContentTime">{{ renderTime(comment) }}</text>
				<text class="commenterContentReply" v-if="comment.pid==0" @click="replyComment">回复</text>
			</div>

			<div v-if="comment.child&&comment.child.data" class="childListWrap" :style="{height:expandHeight}">
				<div v-for="(child,index) in comment.child.data" :key="child.id">
					<commentItem :comment="child" @replyComment="replyComment"></commentItem>
				</div>
			</div>

			<!-- <div class="expandWrap" v-if="comment.child&&comment.child.data.length" @click="expandChild">
				<text class="expandLine"> -- </text>
				<text class="expandWord">{{`展开${comment.child.data.length}条回复`}}</text>
			</div> -->
		</div>
	</div>
</template>

<script>
	export default {
		name: 'commentItem',
		data() {
			return {
				expandHeight: 'auto'
			}
		},
		props: {
			comment: {
				type: Object,
				default: {},
			},
		},
		methods: {
			// expandChild() {
			// 	this.comment.expand = !this.comment.expand
			// 	this.expandHeight = this.comment.expand ? this.comment.child.data.length * 87 : 0
			// },
			renderTime(item) {
				const {
					create_time
				} = item
				return uni.$u.timeFrom(create_time, 'mm-dd')
			},
			replyComment() {
				this.$emit('replyComment', this.comment)
			}
		}
	};
</script>
<style>
	.commentItem {
		display: flex;
		flex-direction: row;
		margin: 14rpx 0;
	}

	.commentWrapItemCenter {
		margin-left: 18rpx;
		display: flex;
		flex-direction: column;
		
	}

	.commenterAvatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 200rpx;
	}

	.childAvatar {
		width: 50rpx;
		height: 50rpx;
	}

	.commenterName {
		font-size: 28rpx;
		font-weight: 400;
		color: #8f919b;
		margin-bottom: 4rpx;
	}

	.commenterContent {
		font-size: 32rpx;
		color: #333;
		width: 600rpx;
	}
	.commenterContentChild {
		font-size: 32rpx;
		color: #333;
		width: 500rpx;
		
	}

	.flexWrap {
		flex-direction: row;
		margin: 6rpx 0;
	}

	.commenterContentTime {
		font-size: 28rpx;
		color: #7a7d81;
	}

	.commenterContentReply {
		font-size: 28rpx;
		color: #333;
		margin-left: 30rpx;
	}

	.expandWrap {
		flex-direction: row;
		align-items: flex-start
	}

	.expandLine {
		font-size: 28rpx;
		color: #7a7d81
	}

	.expandWord {
		font-size: 28rpx;
		color: #7a7d81
	}

	.childListWrap {
		overflow: hidden;
		transition-property: width, height, background-color;
		transition-duration: 0.5s;
		transition-delay: 0.1s;
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
	}
	
</style>
